<script setup lang="ts">
	import { ref } from 'vue'
	import passwordVue from './components/password.vue'
	import mobileVue from './components/mobile.vue'
	//标题数据
	const TitleArr = [
		{ title: '密码登录', subtitle: '验证码登录' },
		{ title: '验证码登录', subtitle: '密码登录' },
	]
	//标题的索引
	const index = ref(0)
	//切换标题
	const ToggleTitle = () => {
		//index 0:1-0=1
		//      1:1-1=0
		index.value = 1 - index.value
	}
</script>
<template>
	<view class="user-login">
		<view class="login-type">
			<view class="title">{{ TitleArr[index].title }}</view>
			<view @tap="ToggleTitle" class="type">
				<text>{{ TitleArr[index].subtitle }}</text>
				<uni-icons color="#3c3e42" type="forward" />
			</view>
		</view>
		<!-- 根据下标  动态的切换页面 -->
		<!-- 可以根据index来进行判断显示哪一个页面 -->
		<!-- 可以使用if/show
		 v- if    是页面会进行进行销毁
		 v-show   页面不会进行销毁,会直接切换(数据或保留)
		 
		 -->
		<!-- <passwordVue v-if="index === 0"></passwordVue>
		<mobileVue v-if="index === 1"></mobileVue> -->
		<passwordVue v-show="index === 0"></passwordVue>
		<mobileVue v-show="index === 1"></mobileVue>
	</view>
	<!-- 社交账号登录 -->
	<view class="social-login">
		<view class="legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="social-account">
			<view class="icon">
				<uni-icons color="#00b0fb" size="30" type="qq" />
			</view>
			<view class="icon">
				<uni-icons color="#fb6622" size="30" type="weibo" />
			</view>
			<view class="icon">
				<uni-icons color="#07C160" size="30" type="weixin" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
